<style>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  font-size: 18px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" class="form">
        <el-form-item>
          <el-input v-model="filters.membername" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.title" placeholder="消息标题"></el-input>
        </el-form-item>
       
        <el-form-item>
          <el-select v-model="filters.type" filterable  style="width: 100%" placeholder="消息类型" >    
					   <el-option
						v-for="item in options"
						:key="item.id"
						:label="item.val"
						:value="item.id">
						</el-option>
			    </el-select>      
        </el-form-item>
    
        <el-form-item>
         <el-select v-model="filters.status" style="width: 200px;" placeholder="状态">
            <el-option label="未读" value="0"></el-option>
            <el-option label="已读" value="1"></el-option>
          </el-select>
        </el-form-item>
      <el-row>
       
        <el-form-item>
          <kt-button icon="fa fa-search" label="查询" type="primary" @click="queryInfo" />
        </el-form-item>
        <el-form-item>
				<kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
			</el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-hand-pointer-o" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
        </el-form-item>
        
      </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
			<el-tooltip content="导出" placement="top">
				<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" id="downloadExcel"></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" 	@handleFilterColumns="handleFilterColumns" :columns="columns">

      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showBatchDelete="false"
      @findPage="findPage"
      @handleDelete="handleDelete"
      @selectionChange="selectionChange"
      ref="CyTable"
    ></cy-table>
   
    <!--新增编辑界面-->
	<el-dialog :title="operation?'新增':'编辑'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form :model="dataForm" label-width="80px"  ref="dataForm" :size="size"
			label-position="right">
			
			<el-form-item label="用户名称" prop="member_id">
        <el-select v-model="dataForm.member_id"   style="width: 100%" placeholder="用户名称" >    
              <el-option
              v-for="item in names"
              :key="item.id"
              :label="item.nickname"
              :value="item.id">
              </el-option>
            </el-select>
			</el-form-item>
			<el-form-item label="消息标题" prop="title">
				<el-input v-model="dataForm.title"  auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="消息类型" prop="type">
				 <el-select v-model="dataForm.type"   style="width: 100%" placeholder="消息类型" >    
              <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.val"
              :value="item.id">
              </el-option>
            </el-select>
			</el-form-item>
			
        <el-form-item label="内容" prop="content">
				<el-input type="textarea" v-model="dataForm.content"  auto-complete="off"></el-input>
        </el-form-item>
		</el-form>

		<div slot="footer" class="dialog-footer">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
		</div>
	</el-dialog>

   
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtTable from "@/views/Core/KtTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import CyTable from "@/views/Core/CyTable";
export default {
  components: {
    PopupTreeInput,
    KtTable,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      loading: false,
      dialogVisibleImage: false,
      filters: {
        t: "messageManage",
        membername:"",
        title:"",
        status:"",

      },
      // 新增编辑界面数据
			dataForm: {
				member_id: '',
				title: '',
				type: '',
				content: '',
			},
      names:{},//用户姓名
      options:{},//消息类型
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      checked: [],
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      checkpage: false,
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: []
    };
  },
  methods: {
    findPage: function(data) {
      this.filters.t = "messageManage";
      this.$refs.CyTable.findPage(this.filters);
    },

     //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'messageManage'
          }).then(() => { 
	        let filename="会员消息列表"
            this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename);
          }).catch(() => {
          });
        } ,
    // 批量删除
    handleDelete: function(data) {
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      data.params.t = "messageManage";
      data.params.ids = ids;
      this.utils.request.deleteUserInfo(data.params, data.callback);
    },
    // 显示新增界面
		handleAdd: function () {
			this.dialogVisible = true
			this.operation = true
			this.dataForm={

			}
		},
    deleteInfoBack: function() {
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
    },
    // 显示查询
    queryInfo: function() {
      this.findPage(this.filters);
    },
    selectionChange: function(params) {
      console.log(params);
      this.checked = params.selections;
    },
   
   
    
   
    	// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},

// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
   

    // 编辑
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            params.t = "messageManage";
            this.utils.request.editUserInfo(params, this.editInfoBack);
          });
        }
      });
    }, // 新增修改回调
    editInfoBack: function() {
      this.findPage();
      this.dialogVisible = false;
      this.operation = false;
      this.editLoading = false;
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "id", label: "ID", minWidth: 50 },
        { prop: "nickname", label: "用户名称", minWidth: 120 },
         { prop: "title", label: "标题", minWidth: 120 },
        { prop: "typeval", label: "消息类型", minWidth: 120 },
        { prop: "content", label: "消息内容", minWidth: 120 },
        { prop: "status", label: "状态", minWidth: 120, formatter: this.showStatus},
         { prop: "create_time", label: "创建时间", minWidth: 120,}
       
      ];
       var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },

    resetForm(formName) {
      (this.filters = {
        t: "messageManage",
        
      }),
        this.findPage();
    },
   
    showStatus(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "未读";
      }
      if (cellValue == 1) {
        return "已读";
      }
    },

    // 消息类型
			queryUserList(){
					var that=this;
				this.utils.request.queryUserList({'t':'sysConfig','type':'msg_type'},function(data){
					that.options=data.data
				})
      },
      
      // 用户姓名
			queryName(){
					var that=this;
				this.utils.request.queryUserList({'t':'member'},function(data){
					that.names=data.data
				})
			},
  },
  mounted() {
    this.initColumns();
    this.queryUserList();
    this.queryName()
  }
};
</script>

<style scoped>
/deep/ .form .el-input__inner {
  width: 200px !important;
}
</style>